<template>
  <div>
    <!-- 搜索框 -->
    <div class="search-box">
      <!-- <div class="title">广州游</div> -->
      <div class="content">
        <div class="left">
          <input type="text" v-model="searchKey" placeholder="请输入目的地">
        </div>
        <div class="right">
          <a href="javascript:void(0)" class="search-button">
            <span class="iconfont search-icon"><i class="el-icon-search"></i> </span> 搜索
          </a>
        </div>
      </div>
    </div>
    <!-- 景区信息列表 -->
    <div class="attracions-container"></div>
  </div>
</template>
 
<script>
export default {
  name: 'TravelBox',
  data() {
    return {
 
    }
  },
  methods: {
 
  }
}
</script>
 
<style lang="less" scoped>
 
.search-box {
  background: url('@/assets/images/travel_bg.jpg') no-repeat top;
  height: 500px;
  background-size: cover;
  background-color: #efefef;
  display: flex;
  align-items: center;

  .title {
    font-size: 56px;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 5px 5px rgba(0, 0, 0, .1);
    text-align: center;

  }

  .content {
    width: 700px;
    background: goldenrod;
    margin: 0 auto;
    position: relative;


    .left {
      background-color: #fff;
      margin-right: 140px;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;

      input {
        height: 20px;
        padding: 20px 0;
        width: 100%;
        display: block;
        border: none;
        font-size: 18px;
        text-indent: 31px;
        color: #636363;
        background-color: transparent;
        -webkit-font-smoothing: antialiased;
        outline: none;

      }
    }

    .right {
      position: absolute;
      right: 0;
      top: 0;
      width: 140px;

      .search-button {
        display: block;
        width: 138px;
        height: 58px;
        line-height: 58px;
        text-align: center;
        font-size: 18px;
        color: #fff;
        background-color: goldenrod;
        border: 1px solid #c7b31c;
        text-decoration: none;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;

        
      }
      .search-button:hover {
          background: rgb(208, 159, 34);
          border: 1px solid rgb(208, 159, 34);
        }
    }



  }
}
</style>